<template>
  <PageDetail :visible.sync="detailVisible">
    <div class="custom-ant">
      <div class="b-m-box">
        <!-- 基本信息&条件 -->
        <BaseInfoAndCondition ref="BaseInfoAndCondition" :isLook="isLook" class="b-m-left" />
        <!-- 监控运行动态 -->
        <MonitoringOperation v-if="isLook" ref="MonitoringOperation" class="b-m-right" />
      </div>
      <!-- 监控维度 -->
      <MonitoringDimensionality ref="MonitoringDimensionality" :isLook="isLook" />
      <!-- 管控规则 -->
      <ControlRule ref="ControlRule" :isLook="isLook" />
      <!-- 考核供应商 -->
      <ExamineSupplier ref="ExamineSupplier" :isLook="isLook" />
    </div>
    <template v-slot:footer>
      <a-button v-if="!isLook" type="primary" @click="onSubmit">确定</a-button>
      <a-button @click="onCancel">取消</a-button>
    </template>
    <!-- <MonitoringOperation ref="MonitoringOperation" /> -->
  </PageDetail>
</template>

<script>
import BaseInfoAndCondition from '@views/supplier-manage/risk-control/detail/components/BaseInfoAndCondition.vue';
import MonitoringOperation from '@views/supplier-manage/risk-control/detail/components/MonitoringOperation.vue';
import MonitoringDimensionality from '@views/supplier-manage/risk-control/detail/components/MonitoringDimensionality.vue';
import ControlRule from '@views/supplier-manage/risk-control/detail/components/ControlRule.vue';
import ExamineSupplier from '@views/supplier-manage/risk-control/detail/components/ExamineSupplier.vue';

export default {
  name: 'RiskControlDetail',
  components: {
    BaseInfoAndCondition,
    MonitoringOperation,
    MonitoringDimensionality,
    ControlRule,
    ExamineSupplier
  },
  data() {
    return {
      detailVisible: false,
      isLook: false,
    }
  },
  created() {
  },
  methods: {
    open({ isLook }) {
      this.isLook = isLook;
      this.detailVisible = true;
    },
    onSubmit() {
      // 基本信息&条件
      const params1 = this.$refs.BaseInfoAndCondition.getParams(true);
      if (!params1) return this.$message.warn(`请把表单补充完整！`);
      // 监控维度
      const params2 = this.$refs.MonitoringDimensionality.getParams(true);
      const params = {
        ...params1,
        ...params2
      }
      console.log(params, 'params');
    },
    onCancel() {
      this.detailVisible = false;
    },
  }
}
</script>

<style lang="less" scoped>
.b-m-box {
  display: flex;
  .b-m-left {
    flex: 1;
  }
  .b-m-right {
    width: 400px;
    margin-left: 10px;
    /deep/ .ant-card-body {
      padding: 0;
    }
  }
}

.circle-hover {
  cursor: pointer;
}
.circle-hover:hover {
  color: #1890FF;
}
</style>